<!--
 * @Descripttion: 报告管理-扫码上传
 * @Author: 何伟伦 weilun@ssc-hn.com
 * @Date: 2024-04-18
 * @LastEditors: 何伟伦 weilun@ssc-hn.com
 * @LastEditTime: 2024-05-10
-->
<template>
  <div class="ssc-list">
    <div class="ssc-search">
      <a-row :gutter="24">
        <a-col :span="8">
          <a-form-item label="码值">
            <a-input ref="codeInput" v-model:value="searchParam.codeValue" placeholder="请在此输入码或选择后用扫码枪扫描" allowclear autofocus @keyup.enter="search()" />
          </a-form-item>
        </a-col>
        <a-col>
          <a-row justify="end">
            <a-button type="primary" @click="search()" :loading="loading">查询</a-button>
            <a-button @click="clear()" class="ml-4" :loading="loading">重置</a-button>
          </a-row>
        </a-col>
      </a-row>
    </div>
    <div class="ssc-tabs">
      <a-tabs v-model:activeKey="activeKey" type="editable-card" hide-add :tab-position="mode" @tab-scroll="callback" @edit="onEdit">
        <a-tab-pane v-for="pane in panes" :key="pane.codeValue" :tab="pane.goodName + pane.codeValue">
          <CodeCard :data="pane" @on-close="closeTab" @open-tab="openTab" />
        </a-tab-pane>
      </a-tabs>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { message, type TabsProps } from 'ant-design-vue'
  import { nextTick, onMounted, reactive, ref } from 'vue'
  import { useRoute } from 'vue-router'
  const mode = ref<TabsProps['tabPosition']>('top')
  const callback: TabsProps['onTabScroll'] = (val) => {
    console.log(val)
  }
  const route = useRoute()
  const { codeValue } = route.query

  // import { requestCodeDetail } from '/@/api/business/tracecode/codeInfo'
  import { requestAssociationInfo } from '/@/api/business/tracecode/codeAssociation'
  import { HttpCodeEnum } from '/@/enums/httpEnum'

  import CodeCard from './components/codeCard.vue'
  const loading = ref<boolean>(false)

  /** 搜索条件 */
  const searchParam = reactive({
    codeValue: '',
  })
  const codeInput = ref(null)

  const panes = ref<CodeAssociationTypes.IResponse[]>([])
  const activeKey = ref('')
  /**
   * 搜索
   */
  const search = async (value?: string) => {
    if (hasCode(value || searchParam.codeValue)) {
      activeKey.value = value || searchParam.codeValue
    } else {
      loading.value = true
      const { responseCode, responseData } = await requestAssociationInfo({ codeValue: value || searchParam.codeValue })
      // const { responseCode, responseData } = await requestCodeDetail({ codeValue: value || searchParam.codeValue })
      if (responseCode === HttpCodeEnum.SUCCESS) {
        if (!responseData) {
          message.error('未查询到该码值信息')
        } else {
          add(responseData)
        }
      }
      loading.value = false
    }
  }
  /**
   * 当前是否有对应的codeValue
   */
  const hasCode = (value) => {
    return panes.value.find((item) => item.codeValue === value)
  }
  /**
   * 新增tab
   */
  const add = (data) => {
    activeKey.value = data.codeValue
    panes.value.push(data)
  }

  const closeTab = (codeValue) => {
    remove(codeValue)
  }

  const openTab = (value) => {
    if (hasCode(value)) {
      activeKey.value = value
    } else search(value)
  }

  const remove = (targetKey) => {
    panes.value = panes.value.filter((item) => item.codeValue !== targetKey)
    activeKey.value = panes.value.length ? panes.value[0].codeValue : ''
  }

  const onEdit = (targetKey: string | MouseEvent, action: string) => {
    if (action === 'remove') remove(targetKey)
  }

  onMounted(() => {
    if (codeValue) {
      searchParam.codeValue = codeValue as string
      search(codeValue as string)
    }
    nextTick(() => {
      codeInput.value && codeInput.value.focus()
    })
  })
  /**
   * 重置
   */
  const clear = () => {
    searchParam.codeValue = ''
  }
</script>

<style lang="less" scoped>
  .ssc-tabs {
    margin-top: 16px;

    ::v-deep(.ant-tabs-nav) {
      margin-bottom: 0;
    }
  }
</style>
